body {
    font-family: Verdana, Arial, sans-serif;
    margin: 20px;
}

h1 {
    font-size: 140%;
    color: #000000;
}

h2 {
    font-size: 120%;
    color: #000090;
}

h3 {
    font-size: 100%;
}

a {
    font-size: 63%;
}

/*div{border:1px dashed rgb(250,0,0);}*/ /*debug*/

#logo-packt {
    position: absolute;
    top: 15px;
    right: 15px
}

#top {
    position: relative;
    top: 0px;
    left: 0px
}

#contents {
    margin: 0px;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 400px;
    z-index: 0;
}

#codeContainer {
    margin: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: auto;
    width: 60%;
    height: 400px;
    z-index: 100;
}

#canvasContainer {
    margin: 0px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 39%;
    height: 400px;
}

#buttons {
    position: relative;
    top: 5px;
    left: 0px;
}

#buttonsCode {
    position: relative;
    top: 0px;
    left: 0px;
    width: 60%;
}

#buttonsCanvas {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 30%;
    text-align: right;
    z-index: 101;
}

#bottom {
    position: relative;
    top: 10px;
    left: 0px;
}

.wait {
    font-family: 'Arial';
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
}

table {
    font-size: 11px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;

}

td {
    padding: 7px;
}

.col1, .col3 {
    background: #D1D1D1;
}

.col2, .col4 {
    background: #ffffff;
}

.border {
    border: 1px solid #D1D1D1;
    font-size: 11px;
}

p {
    font-size: 11px;
}
